<!--
 * @Author: early-autumn
 * @Date: 2020-05-16 17:46:09
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-05-16 17:55:47
-->
<template>
  <el-dialog
    :title="title"
    :visible="value"
    width="1200px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-page-header v-if="userPerson.name" :style="{ marginBottom: '30px' }" class="pageHeader">
      <div slot="content" class="content">
        <el-form inline>
          <el-form-item :label="userPerson.name"></el-form-item>
          <el-form-item :label="`${userPerson.age}`"></el-form-item>
          <el-form-item :label="sexEnum[userPerson.sex]"></el-form-item>
          <el-form-item label="手机号：">
            {{
            userPerson.phoneNumber
            }}
          </el-form-item>
          <el-form-item label="病历：">
            {{
            userPerson.caseNumber
            }}
          </el-form-item>
          <el-form-item label="TC：">{{ userAppointment.tcName }}</el-form-item>
          <el-form-item label="医生：">
            {{
            userAppointment.doctorName
            }}
          </el-form-item>
        </el-form>
      </div>
    </el-page-header>

    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="医生:" prop="doctor">
            <el-select
              v-model="form.doctor"
              filterable
              clearable
              placeholder="请选择医生"
              @change="changeDoctor()"
            >
              <el-option
                v-for="item in doctorList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="护士:" prop="nurse">
            <el-select v-model="form.nurse" filterable clearable placeholder="请选择护士">
              <el-option
                v-for="items in nurseList"
                :key="items.userId"
                :label="items.userName"
                :value="items.userName"
                @change="changeNurse()"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="就诊时间:" prop="clinicTime" label-width="90px">
            <el-date-picker
              v-model="form.clinicTime"
              type="datetime"
              placeholder="选择预约时间"
              size="small"
              style="width: 200px;"
              align="right"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="就诊项目:" prop="projectOptions">
            <el-cascader
              v-model="form.projectOptions"
              placeholder="请选择就诊项目"
              separator="-"
              :options="projectOptions"
              @change="handleProjectChange"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="就诊状态:" prop="clinicStatus">
            <el-select v-model="form.clinicStatus" clearable placeholder="请选择就诊状态">
              <el-option
                v-for="item1 in caseAttendanceStatus"
                :key="item1.dictSort"
                :label="item1.dictLabel"
                :value="item1.dictSort"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="类型" prop="type">
            <el-radio-group v-model="form.type">
              <el-radio
                v-for="item2 in caseType"
                :key="item2.dictValue"
                :label="parseInt(item2.dictValue)"
              >{{ item2.dictLabel }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-checkbox v-model="checked">牙位同步</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>

      <div v-if="!form.type">
        <el-form-item label="主述" prop="mainNarrate" class="rel">
          <el-input
            v-model="mainNarrate"
            type="textarea"
            placeholder="请输入内容"
            @change="changeText"
            @click.native="showDv($event, 'zs')"
          />
          <div ref="zs" class="dv-case" @mouseleave="closeDv($event, 'zs')">
            <div class="case-item flex">
              <div class="case-label">部位：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'mainNarrate')">左上</span>
                <span @click="addText($event, 'mainNarrate')">左下</span>
                <span @click="addText($event, 'mainNarrate')">右上</span>
                <span @click="addText($event, 'mainNarrate')">右下</span>
                <span @click="addText($event, 'mainNarrate')">左</span>
                <span @click="addText($event, 'mainNarrate')">右</span>
                <span @click="addText($event, 'mainNarrate')">上</span>
                <span @click="addText($event, 'mainNarrate')">下</span>
                <span @click="addText($event, 'mainNarrate')">前牙</span>
                <span @click="addText($event, 'mainNarrate')">后牙</span>
                <span @click="addText($event, 'mainNarrate')">前后牙</span>
                <span @click="addText($event, 'mainNarrate')">半口牙</span>
                <span @click="addText($event, 'mainNarrate')">全口牙</span>
              </div>
            </div>
            <div class="case-item flex">
              <div class="case-label">症状：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'mainNarrate')">有洞</span>
                <span @click="addText($event, 'mainNarrate')">折断</span>
                <span @click="addText($event, 'mainNarrate')">缺失</span>
                <span @click="addText($event, 'mainNarrate')">咬合不适</span>
                <span @click="addText($event, 'mainNarrate')">刷牙出血</span>
                <span @click="addText($event, 'mainNarrate')">牙冠变色</span>
                <span @click="addText($event, 'mainNarrate')">牙列不齐</span>
                <span @click="addText($event, 'mainNarrate')">充填物脱落</span>
                <span @click="addText($event, 'mainNarrate')">冷热刺激痛</span>
                <span @click="addText($event, 'mainNarrate')">冷热酸甜敏感</span>
              </div>
            </div>
            <div class="case-item flex">
              <div class="case-label">时间：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'mainNarrate')">1小时</span>
                <span @click="addText($event, 'mainNarrate')">1天</span>
                <span @click="addText($event, 'mainNarrate')">1周</span>
                <span @click="addText($event, 'mainNarrate')">1月</span>
                <span @click="addText($event, 'mainNarrate')">1年</span>
              </div>
            </div>
            <div class="case-item flex">
              <div class="case-label">要求：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'mainNarrate')">要求拔牙</span>
                <span @click="addText($event, 'mainNarrate')">要求洗牙</span>
                <span @click="addText($event, 'mainNarrate')">要求镶牙</span>
                <span @click="addText($event, 'mainNarrate')">要求矫正</span>
              </div>
            </div>
            <div class="case-item flex">
              <div class="case-label">转诊：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'mainNarrate')">接牙体转诊</span>
                <span @click="addText($event, 'mainNarrate')">接修复转诊</span>
                <span @click="addText($event, 'mainNarrate')">接牙周转诊</span>
                <span @click="addText($event, 'mainNarrate')">接外科转诊</span>
                <span @click="addText($event, 'mainNarrate')">接正畸转诊</span>
              </div>
            </div>
            <div class="case-item flex">
              <div class="case-label">复诊：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'mainNarrate')">无明显不适，今日继续治疗</span>
                <span @click="addText($event, 'mainNarrate')">无明显不适，今日治疗</span>
                <span @click="addText($event, 'mainNarrate')">定期复诊洁治</span>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="现病史" prop="nowMedicalHistory" class="rel">
          <el-input
            v-model="nowMedicalHistory"
            type="textarea"
            placeholder="请输入内容"
            @change="changeText"
            @click.native="showDv($event, 'xbs')"
          />
          <div ref="xbs" class="dv-case" @mouseleave="closeDv($event, 'xbs')">
            <div class="case-item flex">
              <div class="case-label">时间：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'nowMedicalHistory')">1小时前</span>
                <span @click="addText($event, 'nowMedicalHistory')">1天前</span>
                <span @click="addText($event, 'nowMedicalHistory')">1周前</span>
                <span @click="addText($event, 'nowMedicalHistory')">1月来</span>
                <span @click="addText($event, 'nowMedicalHistory')">1年来</span>
              </div>
            </div>
            <div class="case-item flex">
              <div class="case-label">部位：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'nowMedicalHistory')">左上</span>
                <span @click="addText($event, 'nowMedicalHistory')">左下</span>
                <span @click="addText($event, 'nowMedicalHistory')">右上</span>
                <span @click="addText($event, 'nowMedicalHistory')">右下</span>
                <span @click="addText($event, 'nowMedicalHistory')">左</span>
                <span @click="addText($event, 'nowMedicalHistory')">右</span>
                <span @click="addText($event, 'nowMedicalHistory')">上</span>
                <span @click="addText($event, 'nowMedicalHistory')">下</span>
                <span @click="addText($event, 'nowMedicalHistory')">前牙</span>
                <span @click="addText($event, 'nowMedicalHistory')">后牙</span>
                <span @click="addText($event, 'nowMedicalHistory')">前后牙</span>
                <span @click="addText($event, 'nowMedicalHistory')">半口牙</span>
                <span @click="addText($event, 'nowMedicalHistory')">全口牙</span>
                <span @click="addText($event, 'nowMedicalHistory')">患者自觉</span>
                <span @click="addText($event, 'nowMedicalHistory')">体检发现</span>
              </div>
            </div>
            <div class="case-item flex">
              <div class="case-label">症状：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'nowMedicalHistory')">有洞</span>
                <span @click="addText($event, 'nowMedicalHistory')">折断</span>
                <span @click="addText($event, 'nowMedicalHistory')">缺失</span>
                <span @click="addText($event, 'nowMedicalHistory')">咬合不适</span>
                <span @click="addText($event, 'nowMedicalHistory')">食物嵌塞</span>
                <span @click="addText($event, 'nowMedicalHistory')">刷牙出血</span>
                <span @click="addText($event, 'nowMedicalHistory')">牙冠变色</span>
                <span @click="addText($event, 'nowMedicalHistory')">牙列不齐</span>
                <span @click="addText($event, 'nowMedicalHistory')">充填物脱落</span>
                <span @click="addText($event, 'nowMedicalHistory')">冷热刺激痛</span>
                <span @click="addText($event, 'nowMedicalHistory')">冷热酸甜敏感</span>
              </div>
            </div>
            <div class="case-item flex">
              <div class="case-label">治疗情况：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'nowMedicalHistory')">未治疗</span>
                <span @click="addText($event, 'nowMedicalHistory')">本院治疗</span>
                <span @click="addText($event, 'nowMedicalHistory')">外院治疗</span>
                <span @click="addText($event, 'nowMedicalHistory')">牙髓治疗</span>
                <span @click="addText($event, 'nowMedicalHistory')">充填治疗</span>
                <span @click="addText($event, 'nowMedicalHistory')">牙周治疗</span>
                <span @click="addText($event, 'nowMedicalHistory')">治疗，具体不详</span>
              </div>
            </div>
            <div class="case-item flex">
              <div class="case-label">症状变化：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'nowMedicalHistory')">缓解</span>
                <span @click="addText($event, 'nowMedicalHistory')">稍缓解</span>
                <span @click="addText($event, 'nowMedicalHistory')">未缓解</span>
              </div>
            </div>
            <div class="case-item flex">
              <div class="case-label">口腔习惯：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'nowMedicalHistory')">刷牙 2次/日，2min/次，不使用牙线，不使用间隙刷</span>
                <span @click="addText($event, 'nowMedicalHistory')">使用电动牙刷</span>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="既往史" prop="passMedicalHistory" class="rel">
          <el-input
            v-model="passMedicalHistory"
            type="textarea"
            placeholder="请输入内容"
            @change="changeText"
            @click.native="showDv($event, 'jwbs')"
          />
          <div ref="jwbs" class="dv-case" @mouseleave="closeDv($event, 'jwbs')">
            <div class="case-item flex">
              <div class="case-label">常规：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'passMedicalHistory')">体健</span>
                <span @click="addText($event, 'passMedicalHistory')">无特殊</span>
                <span @click="addText($event, 'passMedicalHistory')">否认系统性病史</span>
              </div>
            </div>
            <div class="case-item flex">
              <div class="case-label">高血压：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'passMedicalHistory')">否认高血压</span>
                <span @click="addText($event, 'passMedicalHistory')">高血压10年,服药控制,高压/低压 140/80mmHg</span>
                <span @click="addText($event, 'passMedicalHistory')">每日服用抗高压药物</span>
              </div>
            </div>
            <div class="case-item flex">
              <div class="case-label">心脏病：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'passMedicalHistory')">否认心脏病</span>
                <span @click="addText($event, 'passMedicalHistory')">心脏病史 5年</span>
                <span @click="addText($event, 'passMedicalHistory')">每日服用阿司匹林</span>
                <span @click="addText($event, 'passMedicalHistory')">每日服用华法令</span>
                <span @click="addText($event, 'passMedicalHistory')">未服抗凝药</span>
              </div>
            </div>
            <div class="case-item flex">
              <div class="case-label">糖尿病：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'passMedicalHistory')">否认糖尿病</span>
                <span @click="addText($event, 'passMedicalHistory')">糖尿病史 5年</span>
                <span @click="addText($event, 'passMedicalHistory')">维持血糖 mmol/L</span>
                <span @click="addText($event, 'passMedicalHistory')">每日服用抗糖尿病药物</span>
              </div>
            </div>
            <div class="case-item flex">
              <div class="case-label">药物过敏：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'passMedicalHistory')">不详</span>
                <span @click="addText($event, 'passMedicalHistory')">否认药物过敏</span>
                <span @click="addText($event, 'passMedicalHistory')">青霉素类过敏</span>
                <span @click="addText($event, 'passMedicalHistory')">磺胺类过敏</span>
              </div>
            </div>
            <div class="case-item flex">
              <div class="case-label">传染病史：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'passMedicalHistory')">乙型肝炎病史</span>
                <span @click="addText($event, 'passMedicalHistory')">AIDS病史</span>
                <span @click="addText($event, 'passMedicalHistory')">结核病史</span>
                <span @click="addText($event, 'passMedicalHistory')">甲型肝炎病史</span>
              </div>
            </div>
          </div>
        </el-form-item>
      </div>
      <div v-else>
        <el-form-item
          label="复诊"
          prop="mainNarrate"
          class="rel"
          @click.native="showDv($event, 'fz')"
        >
          <el-input
            v-model="mainNarrate"
            type="textarea"
            placeholder="请输入内容"
            @change="changeText"
          />
          <div ref="fz" class="dv-case" @mouseleave="closeDv($event, 'fz')">
            <div class="case-item flex">
              <div class="case-label">部位：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'mainNarrate')">左上</span>
                <span @click="addText($event, 'mainNarrate')">左下</span>
                <span @click="addText($event, 'mainNarrate')">右上</span>
                <span @click="addText($event, 'mainNarrate')">右下</span>
                <span @click="addText($event, 'mainNarrate')">左</span>
                <span @click="addText($event, 'mainNarrate')">右</span>
                <span @click="addText($event, 'mainNarrate')">上</span>
                <span @click="addText($event, 'mainNarrate')">下</span>
                <span @click="addText($event, 'mainNarrate')">前牙</span>
                <span @click="addText($event, 'mainNarrate')">后牙</span>
                <span @click="addText($event, 'mainNarrate')">前后牙</span>
                <span @click="addText($event, 'mainNarrate')">半口牙</span>
                <span @click="addText($event, 'mainNarrate')">全口牙</span>
              </div>
            </div>
            <div class="case-item flex">
              <div class="case-label">症状：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'mainNarrate')">有洞</span>
                <span @click="addText($event, 'mainNarrate')">折断</span>
                <span @click="addText($event, 'mainNarrate')">缺失</span>
                <span @click="addText($event, 'mainNarrate')">咬合不适</span>
                <span @click="addText($event, 'mainNarrate')">刷牙出血</span>
                <span @click="addText($event, 'mainNarrate')">牙冠变色</span>
                <span @click="addText($event, 'mainNarrate')">牙列不齐</span>
                <span @click="addText($event, 'mainNarrate')">充填物脱落</span>
                <span @click="addText($event, 'mainNarrate')">冷热刺激痛</span>
                <span @click="addText($event, 'mainNarrate')">冷热酸甜敏感</span>
              </div>
            </div>
            <div class="case-item flex">
              <div class="case-label">时间：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'mainNarrate')">1小时</span>
                <span @click="addText($event, 'mainNarrate')">1天</span>
                <span @click="addText($event, 'mainNarrate')">1周</span>
                <span @click="addText($event, 'mainNarrate')">1月</span>
                <span @click="addText($event, 'mainNarrate')">1年</span>
              </div>
            </div>
            <div class="case-item flex">
              <div class="case-label">要求：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'mainNarrate')">要求拔牙</span>
                <span @click="addText($event, 'mainNarrate')">要求洗牙</span>
                <span @click="addText($event, 'mainNarrate')">要求镶牙</span>
                <span @click="addText($event, 'mainNarrate')">要求矫正</span>
              </div>
            </div>
            <div class="case-item flex">
              <div class="case-label">转诊：</div>
              <div class="case-content flex flex-wrap">
                <span @click="addText($event, 'mainNarrate')">接牙体转诊</span>
                <span @click="addText($event, 'mainNarrate')">接修复转诊</span>
                <span @click="addText($event, 'mainNarrate')">接牙周转诊</span>
                <span @click="addText($event, 'mainNarrate')">接外科转诊</span>
                <span @click="addText($event, 'mainNarrate')">接正畸转诊</span>
              </div>
            </div>
          </div>
        </el-form-item>
      </div>

      <el-form-item label="口腔检查" prop="mouthExamineToothPosition" class="rel">
        <div class="box">
          <fast-input :input-type="'1'" :details="form.detail" :open="value" @getDetail="getDetail"></fast-input>
        </div>
      </el-form-item>
      <el-form-item label="辅助检查" prop="subsidiaryExamineToothPosition" class="rel">
        <fast-input :input-type="'2'" :details="form.detail" :open="value" @getDetail="getDetail"></fast-input>
        <div class="box"></div>
      </el-form-item>
      <el-form-item label="诊断" prop="diagnoseToothPosition">
        <div class="box">
          <fast-input :input-type="'3'" :details="form.detail" :open="value" @getDetail="getDetail"></fast-input>
        </div>
      </el-form-item>
      <el-form-item label="治疗计划" prop="curePlanToothPosition" class="rel">
        <div class="box">
          <fast-input :input-type="'4'" :details="form.detail" :open="value" @getDetail="getDetail"></fast-input>
        </div>
      </el-form-item>
      <el-form-item label="处置" prop="disposeToothPosition" class="rel">
        <div class="box">
          <fast-input :input-type="'5'" :details="form.detail" :open="value" @getDetail="getDetail"></fast-input>
        </div>
      </el-form-item>
      <el-form-item label="医嘱" prop="doctorAdvice" class="rel">
        <el-input
          v-model="doctorAdvice"
          type="textarea"
          placeholder="请输入内容"
          @click.native="showDv($event, 'yz')"
        />
        <div ref="yz" class="dv-case" style="height: 160px;" @mouseleave="closeDv($event, 'yz')">
          <div class="case-item flex">
            <div class="case-label">常规医嘱：</div>
            <div class="case-content flex flex-wrap">
              <span @click="addText($event, 'doctorAdvice')">不适随诊</span>
            </div>
          </div>
          <div class="case-item flex">
            <div class="case-label">充填医嘱：</div>
            <div class="case-content flex flex-wrap">
              <span @click="addText($event, 'doctorAdvice')">忌咬硬物，若出现牙髓症状行根管治疗</span>
            </div>
          </div>
          <div class="case-item flex">
            <div class="case-label">根管医嘱：</div>
            <div class="case-content flex flex-wrap">
              <span @click="addText($event, 'doctorAdvice')">不随随诊，约两周后复诊取出失活剂</span>
              <span @click="addText($event, 'doctorAdvice')">勿咬硬物，一周后复诊</span>
            </div>
          </div>
          <div class="case-item flex">
            <div class="case-label">拔牙医嘱：</div>
            <div class="case-content flex flex-wrap">
              <span @click="addText($event, 'doctorAdvice')">嘱不适随诊，咬棉卷40min，24h不刷牙漱口，2h后可饮食，建议饮食不要太热</span>
              <span @click="addText($event, 'doctorAdvice')">一周复诊拆线</span>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item v-if="hackReset" label="备注" prop="remarks">
        <el-input v-model="form.remarks" type="textarea" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { listCase, getCase, delCase, addCase, exportCase } from '@/api/erp/case'
import { postName } from '@/api/system/user'
import { mapGetters, mapState } from 'vuex'
import { getTreeProject } from '@/common/datas'
import FastInput from '@/components/yiya/FastInput'
import { sexEnum } from '@/utils/enums'

export default {
  name: 'MedicalEditor',
  components: {
    FastInput,
  },
  model: {
    prop: 'value',
    event: 'close',
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    clinicPersonId: {
      type: Number,
      required: true,
    },
    title: {
      type: String,
      default: '',
    },
    caseData: {
      type: Object,
      default: () => ({}),
    },
    userPerson: {
      type: Object,
      default: () => ({}),
    },
    userAppointment: {
      type: Object,
      default: () => ({}),
    },
    dtype: {
      type: Number,
      default: 0,
    },
  },

  data() {
    return {
      form: {
        type: 0,
        mainNarrate: '',
        nowMedicalHistory: '',
        nurse: undefined,
        projectOptions: null,
      },
      doctorList: [],
      nurseList: [],
      checked: false,
      hackReset: true,
      mainNarrate: '',
      nowMedicalHistory: '',
      passMedicalHistory: '',
      doctorAdvice: '',
      // 表单校验
      rules: {
        clinicTime: [
          { required: true, message: '就诊时间不能为空', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '就诊时间不能为空', trigger: 'blur' },
        ],
      },
    }
  },
  computed: {
    ...mapGetters('dict', ['caseAttendanceStatus', 'caseType']),
    ...mapState({
      clinicId: (state) => state.clinic.clinicId,
    }),
    projectOptions: () => getTreeProject(),
    sexEnum() {
      return sexEnum
    },
  },
  watch: {
    value(val) {
      this.setFormData()
    },
    checked: {
      handler(val) {
        this.showFn(val)
      },
    },

    'form.mouthExamineToothPosition': {
      deep: true,
      handler(val) {
        this.showsFn(val)
      },
    },
    caseData(newVal) {
      this.init()
    },
  },
  created() {
    this.getUserListAll('医生')
    this.getUserListAll('护士')
    this.init()
  },
  methods: {
    changeDoctor() {
      this.$forceUpdate()
    },
    changeNurse() {
      this.$forceUpdate()
    },
    changeText(e) {
      this.$forceUpdate()
    },
    setFormData() {
      if (this.userAppointment.startReservationTime !== undefined) {
        this.form.doctor = this.userAppointment.doctorName
        this.form.clinicTime = this.userAppointment.startReservationTime
      }
    },
    init() {
      this.form = JSON.parse(JSON.stringify(this.caseData))

      this.mainNarrate = !this.form.mainNarrate ? '' : this.form.mainNarrate
      this.nowMedicalHistory = !this.form.nowMedicalHistory
        ? ''
        : this.form.nowMedicalHistory
        this.passMedicalHistory = !this.form.passMedicalHistory
          ? ''
          : this.form.passMedicalHistory
        this.doctorAdvice = !this.form.doctorAdvice
          ? ''
          : this.form.doctorAdvice
      if (this.form.detail) {
        this.form.detail = JSON.parse(JSON.stringify(this.form.detail))
      } else {
        this.resetDetail()
      }
      if (this.form.clinicProject != undefined) {
        this.form.projectOptions = this.form.clinicProject.split('-')
      }
    },
    resetDetail() {
      this.form.detail = {
        mouthExamine: [
          {
            position: '',
            content: '',
          },
        ],
        subsidiaryExamine: [
          {
            position: '',
            content: '',
          },
        ],
        diagnose: [
          {
            position: '',
            content: '',
          },
        ],
        curePlan: [
          {
            position: '',
            content: '',
          },
        ],
        dispose: [
          {
            position: '',
            content: '',
          },
        ],
      }
    },
    reset() {
      this.form = {
        type: 0,
      }
      this.checked = false
      this.resetForm('form')
    },
    showsFn(e) {
      if (this.checked) {
        this.form.subsidiaryExamineToothPosition = e
        this.form.diagnoseToothPosition = e
        this.form.curePlanToothPosition = e
        this.form.disposeToothPosition = e
      }
    },
    showFn(e) {
      console.log(this.form.detail, '==>')
      if (e) {
        if (
          this.form.detail.mouthExamine[0].position != '' &&
          this.form.detail.mouthExamine[0].position != undefined
        ) {
          this.$confirm('确认要同步所有牙位吗?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              for (let item of this.form.detail.mouthExamine) {
                item.position = this.form.detail.mouthExamine[0].position
              }
              for (let item of this.form.detail.subsidiaryExamine) {
                item.position = this.form.detail.mouthExamine[0].position
              }

              for (let item of this.form.detail.diagnose) {
                item.position = this.form.detail.mouthExamine[0].position
              }

              for (let item of this.form.detail.curePlan) {
                item.position = this.form.detail.mouthExamine[0].position
              }
              for (let item of this.form.detail.dispose) {
                item.position = this.form.detail.mouthExamine[0].position
              }
              this.showDatePicker()
              this.msgSuccess('同步成功')
            })
            .catch(function () {
              return
            })
        } else {
          return
        }
      }
    },
    showDatePicker() {
      this.hackReset = false
      this.$nextTick(() => {
        this.hackReset = true
      })
    },
    handleProjectChange(e) {
      if (e) {
        this.form.clinicProject = e.join('-')
      } else {
        return
      }
    },
    resetFromFields() {

      this.form.type = 0
      this.checked = false
      this.mainNarrate = ''
      this.nowMedicalHistory = ''
      this.passMedicalHistory = ''
      this.doctorAdvice = ''
      this.form.projectOptions = null
    },
    handleClose() {
      if (this.dtype == 0) {
        this.resetFromFields()
        this.resetDetail()
      }
      else {
        this.init() 
      }

      this.$emit('close', false)
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.clinicTime = this.parseTime(
            this.form.clinicTime,
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
          this.form.clinicPersonId = this.clinicPersonId
          this.form.detail = JSON.stringify(this.form.detail)
          this.form.mainNarrate = this.mainNarrate
          this.form.nowMedicalHistory = this.nowMedicalHistory
          this.form.passMedicalHistory = this.passMedicalHistory
          this.form.doctorAdvice = this.doctorAdvice
          this.$emit('submit', {
            ...this.form,
            title: this.title,
          })
          this.reset()
          this.handleClose()
        }
      })
    },
    async getUserListAll(postname) {
      let params = {
        postname,
        deptId: this.clinicId,
      }
      const { data } = await postName(params)
      if (postname == '医生') {
        this.doctorList = data
      } else {
        this.nurseList = data
      }
    },
    //点击textarea显示下部选择框
    showDv(e, showRef) {
      let dvs = document.getElementsByClassName('dv-case')
      for (let i = 0; i < dvs.length; i++) {
        dvs[i].style.display = 'none'
      }
      this.$refs[showRef].style.display = 'block'
    },
    closeDv(e, closeRef) {
      this.$refs[closeRef].style.display = 'none'
    },
    //点击span添加内容
    addText(e, formText) {
      if (formText == 'mainNarrate') {
        this.mainNarrate += e.currentTarget.innerText + ','
      }
      if (formText == 'nowMedicalHistory') {
        this.nowMedicalHistory += e.currentTarget.innerText + ','
      }
      if (formText == 'doctorAdvice') {
        this.doctorAdvice += e.currentTarget.innerText + ','
      }
      if (formText == 'passMedicalHistory') {
        this.passMedicalHistory += e.currentTarget.innerText + ','
      }
      this.$forceUpdate()
    },
    getDetail(e) {
      if (!this.form.detail) {
        this.form.detail = {
          mouthExamine: [
            {
              position: '',
              content: '',
            },
          ],
          subsidiaryExamine: [
            {
              position: '',
              content: '',
            },
          ],
          diagnose: [
            {
              position: '',
              content: '',
            },
          ],
          curePlan: [
            {
              position: '',
              content: '',
            },
          ],
          dispose: [
            {
              position: '',
              content: '',
            },
          ],
        }
      }
      if (e.type == '1') {
        this.form.detail.mouthExamine = e.obj
      }
      if (e.type == '2') {
        this.form.detail.subsidiaryExamine = e.obj
      }
      if (e.type == '3') {
        this.form.detail.diagnose = e.obj
      }
      if (e.type == '4') {
        this.form.detail.curePlan = e.obj
      }
      if (e.type == '5') {
        this.form.detail.dispose = e.obj
      }
      console.log('kankan==>', this.form.detail)
    },
  },
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-wrap: nowrap;
}
.content {
  margin-top: -6px;
  height: 20px;
}
.pageHeader >>> .el-page-header__left {
  display: none;
}
.pageHeader >>> .el-page-header__content {
  margin-left: 80px;
}
.rel {
  position: relative;
}
.dv-case {
  display: none;
  position: absolute;
  z-index: 2;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-top: 0;
  width: 100%;
  padding: 0 15px;
  height: 220px;
  overflow: auto;
}
.div-case-small {
  top: 54px;
  width: 897px;
  left: 183px;
}
.case-label {
  position: relative;
  top: 3px;
  width: 80px;
}
.case-content {
  width: 90%;
}
.case-content span {
  cursor: pointer;
  display: flex;
  align-self: center;
  margin: 0 5px;
  margin-top: 5px;
  padding: 0 5px;
  background: #eee;
  min-height: 20px;
  line-height: 20px;
  border-radius: 2px;
}
.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.flex-text-start {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-text-end {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flex-text-center {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-text-between {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-text-around {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.flex-nowrap {
  /* flex不换行 */
  flex-wrap: nowrap;
}

.flex-wrap {
  /* flex第一行在上方 */
  flex-wrap: wrap;
}
</style>
